.input {
	@include font-ui-pos('small', 'normal');

	position: relative;
	display: flex;
	overflow: visible;
	align-items: center;
	width: 100%;
	height: 30px;
	margin: 1px 0 1px 0;
	padding: 8px 4px 8px 7px;

	color: $figma-black-8;
	border: 1px solid transparent;
	border-radius: $border-radius-small;
	outline: none;
	background-color: $figma-white;

	&:hover {
		color: $figma-black-8;
		border: 1px solid $figma-black-1;
	}

	&::selection {
		color: $figma-black;
		background-color: $figma-blue-3;
	}

	&::placeholder {
		color: $figma-black-3;
		border: 1px solid transparent;
	}

	&:not(:disabled):not(:hover):placeholder-shown {
		border: 1px solid transparent;
		background-image: url('');
		background-repeat: no-repeat;
		background-position: center bottom -0.9px;
		background-size: calc(100% - 10px) 1px;
	}

	&:not(:disabled):focus:placeholder-shown {
		border: 2px solid $figma-blue;
	}

	&:not(:disabled):focus:not(:placeholder-shown) {
		padding-left: 6px;
	}

	&:disabled:hover {
		border: 1px solid transparent;
	}

	&:active, &:focus {
		padding: 8px 4px 8px 6px;

		color: $figma-black;
		border: 2px solid $figma-blue;
		border-radius: $border-radius-small;
	}

	&:disabled {
		position: relative;

		color: $figma-black-3;
	}

	&:disabled:active {
		padding: 8px 4px 8px 7px;
	}
}
